<link rel="stylesheet" href="__PUBLIC_JS__/layui/css/layui.css" media="all">
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js" charset="utf-8"></script>
<script src="__PUBLIC_JS__/echarts.min.js" charset="utf-8"></script>
<!-- <script src="js/visual.js" charset="utf-8"></script> -->
<script src="__PUBLIC_JS__/layui/layui.js" charset="utf-8"></script>

<div class="layui-form hisi-search">
    <form action="{:url()}" method="get" id="hisi-table-search">
        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="bg_time" type="text" placeholder="选择查询开始时间" name="bg_time">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="ed_time" type="text" placeholder="选择查询结束时间" name="ed_time">
            </div>
        </div>

        <div class="layui-form-item hisi-search-btn">
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn layui-btn-normal layui-icon layui-icon-search">查询</button>
            </div>
        </div>
    </form>
</div>


<div style="width: 100%;height: 300px;" id="main"></div>

<table class="layui-hide" id="test"></table>

<script type="text/javascript">
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var util = layui.util;

        table.render({
            elem: '#test'
            , url: '{:url()}'
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , limits: [5, 10, 15, 20]
            , toolbar: true
            , even: true
            , page: true
            , id: 'searchTable'
            , cols: [[
                {type: 'numbers'}
                , {field: 'is_pay_num', title: '支付订单/笔'}
                , {field: 'is_pay_money', title: '支付金额/元'}
                , {field: 'pay_man_num', title: '待发货订单/笔'}
                , {field: 'not_send_num', title: '支付人数/人'}
                , {field: 'refund_num', title: '退款订单/笔'}
                

            ]]
            , done: function (res, curr, count) {
                console.log(res);
                var dataName = [], dataList = [];
                for (var i = 0; i < res.data.length; i++) {
                    dataName.push(res.data[i].is_pay_num);
                    dataList.push(res.data[i].is_pay_money);
                }
                //渲染图表;
                echart1Str(dataName, dataList);
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('searchTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        keys: demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#bg_time'
            ,type: 'datetime'
        });
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#ed_time'
            ,type: 'datetime'
        });
    });

    /**
 * Created by Administrator on 2020-08-02.
 */
function echart1Str(vname, dataList) {
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        grid: {
            top: '5%',
            right: '2%',
            left: '2%',
            bottom: '5%'
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        xAxis: [{
            type: 'category',
            data: vname,
            axisPointer: {
                type: 'line'
            },
            axisLine: {
                lineStyle: {
                    color: '#272456'
                }
            },
            axisLabel: {
                textStyle: {
                    fontSize: 12,
                    color: 'rgba(0,0,0,0.5)',
                }
            },
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    fontSize: 12,
                    color: 'rgba(0,0,0,0.5)',
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#272456'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0,0,0,0.2)'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: dataList,
            barWidth: '50%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#39e7d7'
                    }, {
                        offset: 1,
                        color: '#10A7DB'
                    }], false),
                    barBorderRadius: [5, 5, 0, 0],
                    /*shadowColor: 'rgba(0,255,225,1)',
                     shadowBlur: 4,*/
                }
            }
        }]
    };


    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

    
}
</script>